<!--
 * @Description: 
 * @Author: 赵大壮
 * @Date: 2022-12-05 12:22:10
 * @LastEditTime: 2022-12-06 11:42:58
 * @LastEditors: 赵大壮
-->
<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full flex flex-row justify-between">
            <div class="flex flex-row">
                <el-select class="w-w200" v-model="s_user_assess.m_screen.assessId" placeholder="请选择量表"
                    @change="action_list_user_assess" clearable>
                    <el-option v-for="item in s_assess.list_assess" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-select class="w-w200 ml-w10" v-model="s_user_assess.m_screen.status" placeholder="请选择报告状态"
                    @change="action_list_user_assess" clearable>
                    <el-option label="未测评" :value="0">
                    </el-option>
                    <el-option label="生成中" :value="1">
                    </el-option>
                    <el-option label="已完成" :value="2">
                    </el-option>
                </el-select>
                <el-date-picker class="w-w200 ml-w10" v-model="s_user_assess.m_screen.time" type="date"
                    placeholder="选择日期" value-format="timestamp" @change="action_list_user_assess" clearable>
                </el-date-picker>

                <el-input class="w-w280 ml-w10" placeholder="请输入订单号" v-model="s_user_assess.m_screen.orderNum" clearable
                    @clear="action_list_user_assess">
                    <el-button slot="append" icon="el-icon-search" @click="action_list_user_assess"></el-button>
                </el-input>
                <el-input class="w-w280 ml-w10" placeholder="请输入测评人信息" v-model="s_user_assess.m_screen.name" clearable
                    @clear="action_list_user_assess">
                    <el-button slot="append" icon="el-icon-search" @click="action_list_user_assess"></el-button>
                </el-input>
            </div>
            <el-button type="primary" class=" bg-cmain_hover " @click="action_export_data()">
                导出报告
            </el-button>
        </div>
        <div class="w-full h-full mt-w20 ">
            <el-table :data="s_user_assess.list_user_assess" stripe style="width: 100%; " height="660">
                <el-table-column type="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="assess" label="量表" min-width="15%">
                </el-table-column>
                <el-table-column prop="name" label="测评者姓名" min-width="15%">
                </el-table-column>
                <el-table-column prop="phone" label="测评者电话" min-width="15%">
                </el-table-column>
                <el-table-column prop="email" label="测评者邮箱" min-width="15%">
                </el-table-column>
                <el-table-column label="报告状态" min-width="15%">
                    <template slot-scope="scope">
                        <div class=" text-f15  " :class="action_report_status_style(scope.row.status)">{{
                                action_report_status(scope.row.status)
                        }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.status != 2" type="text"
                            @click="action_down_report(scope.row.path)">下载报告</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="w-full flex items-end justify-center" style="height:7%">
                <el-pagination background layout="prev, pager, next" :total="s_user_assess.m_page.total"
                    :page-size="s_user_assess.m_page.limit" @current-change="action_page_change">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>

</style>
